<!--首页-->
<script setup>
import {onMounted, ref} from 'vue';
import {get,post} from '../util/Request.js'
import {Toast} from "tdesign-mobile-vue";
import router from "../router/index.js";



const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
const swiperList = [
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  `${imageCdn}/swiper1.png`,
];

const images=ref([])
onMounted(()=> {
  get("tbBook/find").then(r => {
    if (r.code == 0) {
      images.value = r.data.records
    } else {
      Toast(r.data)
    }
  })
})

const value=ref("")

const onChange=()=>{
  localStorage.setItem("value",value.value)
  router.push("/lul")
}


const jianjie=(r)=>{
  localStorage.setItem("bookName",r)
  router.push("/aiw")
}


const imageSrc = ref('https://tdesign.gtimg.com/demo/demo-image-1.png');

const content = ref('提示文字描述提示文字描述提示文字描述提示文字描述文');


</script>

<template>
  <div class="example-search">
    <t-search v-model="value" :clearable="true" shape="round" placeholder="请输入关键字" @change="onChange"></t-search>
  </div>
  <div style="padding: 0 12px;margin-top: 3%;">
    <t-swiper :autoplay="true" height="192px" :navigation="{ type: 'dots-bar' }" @change="handleChange">
      <t-swiper-item v-for="(item, index) in swiperList" :key="index">
        <img :src="item" class="img" style="width: 100%;height: 100%" />
      </t-swiper-item>
    </t-swiper>
  </div>
  <div style="margin-top: 2%">
    <t-notice-bar style="width: 85%;margin-left: 3%;" class="notice-bar-demo-block" visible :prefix-icon="false" marquee :content="content" />
  </div>
  <div>
    <div class="image-demo" style="padding: 0 8px;margin-top: 3%;width:95%;height:100%;flex-wrap: wrap;display: flex">
      <div v-for="image in images" @click="jianjie(image.bookName)" style="width: 108px; height: 210px; margin-left: 1.2%;">
        <t-image :src="image.bookImg" class="image-container" style="width: 108px; height: 70%;" />
        <p class="image-demo-tip">{{ image.bookName }}</p>
      </div>
    </div>
  </div>

</template>

<style scoped>

</style>